<template>
  <a-modal
      :title="titles"
      :visible="modalVisible"
      @cancel="handleCancel"
      @ok="confirmSubmission"
  >
    <a-form
        :form="form"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 18}"
    >
      <a-form-item label="场景选择">
        <a-radio-group v-model="value" @change="onChange">
          <a-radio :value="1">
            无
          </a-radio>
          <a-radio :value="2">
            视频
          </a-radio>
          <a-radio :value="3">
            全景图
          </a-radio>
        </a-radio-group>
        <div v-if="value === 2">
          <VideoUpload />
        </div>
        <div v-if="value === 3">
          <ImgUpload />
        </div>
      </a-form-item>
      <!-- 关键词 -->
      <a-form-item label="关键词">
        <a-select
            mode="tags"
            :default-value="linetable.keyWord"
            style="width: 200px"
            @change="handleChange"
        >
          <a-select-option v-for="(item) in linetable.keyWord" :key="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="问题">
        <a-textarea
            v-model="linetable.problem"
            placeholder="Controlled autosize"
            :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="回答">
        <a-textarea
            v-model="linetable.answer"
            placeholder="Controlled autosize"
            :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="规则">
        <a-textarea
            :value="linetable.rulee"
            placeholder="Controlled autosize"
            :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="上传语音">
<!--        <UploadAudio />-->
      </a-form-item>
      <a-form-item label="状态">
        <a-switch checked-children="已应用" un-checked-children="未应用" :default-checked="true"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
//  引入图片上传组件
import ImgUpload from '../components/ImgUpload';
//  引入视频上传组件
import VideoUpload from '../components/VideoUpload';

export default {
  name: 'SceneAdd',
  props: {
    modalVisible: Boolean,
    titles: String,
    linetable: null
  },
  components: {
    ImgUpload,VideoUpload
  },
  data() {
    return {
      value: 1,         //  选择场景的默认值
      problem: '',     //  问题的初始化
      answer: '',      //  回答的初始化
      rulee: '',       //  规则的初始化
      form: this.$form.createForm(this, { name: 'validate_other' }),         //  初始化表单
    };
  },
  methods: {
    //  点击取消
    handleCancel() {
      this.$emit('changeVisible',false)
    },
    //  点击确定
    confirmSubmission(e){
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          this.$emit('submitOk',false)
        }
        this.modalVisible = true
      });

    },
    //  场景单选
    onChange(e) {
      console.log(e.target.value);
    },

    //  关键字选择器
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
  }
};
</script>

<style scoped>

</style>
